<template>
  <div>
    <el-dialog title="地址信息" v-model="dialogVisible" width="500px">
      <el-form :model="params" ref="addressForm" label-width="100px">
        <el-form-item label="收件人">
          <el-input v-model="params.receiverName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="params.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="params.receiverAddress" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAddress">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import * as petAdoptionApi from "@/api/petAdoption.js";
const props = defineProps({
  modelValue: false,
  petId:''
})
const dialogVisible = computed(() => {
  return props.modelValue
});

const params = ref({
  receiverAddress:'',
  receiverName:'',
  receiverPhone:'',
})

const emits = defineEmits(['update:modelValue']);

const submitAddress =async () => {
  params.value.petId = props.petId
  console.log(params.value)
  await petAdoptionApi.add(params.value)
  emits('update:modelValue', false);
}

</script>

<style lang="scss" scoped></style>